<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-info">
      <view class="user-avatar">
        <image src="/static/default-avatar.png"></image>
      </view>
      <view class="user-name" ref="userName"></view>
      <view class="user-stats">
        <view class="fans-count">
          <text class="fans-number" ref="fansNumber"></text>
          <text class="fans-label" ref="fansLabel"></text>
        </view>
        <view class="divider"></view>
        <view class="follow-count">
          <text class="follow-number" ref="followNumber"></text>
          <text class="follow-label" ref="followLabel"></text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item">
        <view class="function-icon">👤</view>
        <view class="function-name" ref="personalInfo">个人信息</view>
        <view class="arrow-right">→</view>
      </view>
      <view class="function-item">
        <view class="function-icon">💰</view>
        <view class="function-name" ref="myWallet">我的钱包</view>
        <view class="arrow-right">→</view>
      </view>
      <view class="function-item" @click="resume">
        <view class="function-icon">❤️</view>
        <view class="function-name" ref="myResume">我的简历</view>
        <view class="arrow-right">→</view>
      </view>
      <view class="function-item" @click="checkstudent">
        <view class="function-icon">🏆</view>
        <view class="function-name" ref="pickStudent">挑选学生</view>
        <view class="arrow-right">→</view>
      </view>
      <view class="function-item">
        <view class="function-icon">⚙️</view>
        <view class="function-name" ref="settings">设置</view>
        <view class="arrow-right">→</view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view 
        class="bottom-nav-item" 
        :class="{'active': tabIndex === 0}" 
        @click="onTabClick(0)"
      >
        <view class="nav-icon">🏠</view>
        <view class="nav-text" ref="homeText">首页</view>
      </view>
      <view 
        class="bottom-nav-item" 
        :class="{'active': tabIndex === 1}" 
        @click="onTabClick(1)"
      >
        <view class="nav-icon">👤</view>
        <view class="nav-text" ref="myText">我的</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/default-avatar.png',
        username: '我的昵称',
        fansCount: 999,
        followCount: 666
      },
      tabIndex: 1, // 默认选中"我的"标签
      textElements: [
        { ref: 'userName', text: '我的昵称' },
        { ref: 'fansNumber', text: '999' },
        { ref: 'fansLabel', text: '粉丝' },
        { ref: 'followNumber', text: '666' },
        { ref: 'followLabel', text: '关注' },
        { ref: 'personalInfo', text: '个人信息' },
        { ref: 'myWallet', text: '我的钱包' },
        { ref: 'myResume', text: '我的简历' },
        { ref: 'pickStudent', text: '挑选学生' },
        { ref: 'settings', text: '设置' },
        { ref: 'homeText', text: '首页' },
        { ref: 'myText', text: '我的' }
      ]
    };
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    this.initTabs();
    this.animateTextLoading();
  },
  methods: {
    getUserInfo() {
      setTimeout(() => {
        this.userInfo.username = '我的昵称';
        this.userInfo.fansCount = 999;
        this.userInfo.followCount = 666;
      }, 1000);
    },
    initTabs() {
      // 初始化标签状态
      this.tabIndex = 1; // 设置"我的"标签为选中状态
    },
    checkstudent() {
      uni.navigateTo({
        url: '/pages/index/business/checkstudent'
      });
    },
    resume() {
      uni.navigateTo({
        url: '/pages/index/business/resume'
      });
    },
    onTabClick(index) {
      this.tabIndex = index;
      // 这里可以添加页面切换逻辑
      if (index === 0) {
        console.log('切换到首页');
        uni.navigateTo({
          url: '/pages/index/business/business'
        });
        // 跳转到首页的逻辑
      } else if (index === 1) {
        console.log('切换到我的页面');
        // 当前已经在"我的"页面，可以不处理
      }
    },
    animateTextLoading() {
      // 为每个文本元素添加逐个字符显示的动画
      this.textElements.forEach(element => {
        const el = this.$refs[element.ref];
        const text = element.text;
        let index = 0;
        
        // 使用定时器逐个显示字符
        const timer = setInterval(() => {
          if (index < text.length) {
            el.textContent += text.charAt(index);
            index++;
          } else {
            clearInterval(timer);
          }
        }, 200); // 调整字符显示的间隔时间（毫秒）
      });
    }
  }
};
</script>

<style>
.container {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 414px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 60px;
  position: relative;
}

.user-info {
  background-color: #fff;
  padding: 30px 0;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
}

.user-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.user-stats {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fans-count,
.follow-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.fans-number,
.follow-number {
  font-size: 18px;
  font-weight: bold;
  color: #ff7a7a;
}

.fans-label,
.follow-label {
  font-size: 12px;
  color: #999;
}

.divider {
  width: 1px;
  height: 20px;
  background-color: #eaeaea;
}

.function-list {
  background-color: #fff;
  margin-top: 20px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
}

.function-icon {
  font-size: 24px;
  margin-right: 15px;
  color: #5ac8fa;
}

.function-name {
  flex: 1;
  font-size: 16px;
}

.arrow-right {
  font-size: 16px;
  color: #999;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  border-top: 1px solid #eee;
}

.bottom-nav-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}

.nav-icon {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
}

.nav-text {
  color: #666;
}

.bottom-nav-item.active .nav-text {
  color: #5ac8fa;
}

.bottom-nav-item.active .nav-icon {
  color: #5ac8fa;
}
</style>